<template>
  <div id="salvenote">
    <div>
      <span class="title-item">打卡距离分页数据</span>
    </div>
    <a-form-model :model="page" :colon="false" layout="inline" style="margin: 10px 0">
          <a-form-model-item label="查询排口">
            <a-input v-model="page.monitorName" placeholder="请输入排口" allow-clear></a-input>
          </a-form-model-item>
          <a-form-model-item label="查询工厂">
            <a-input v-model="page.companyName" placeholder="请输入工厂名" allow-clear></a-input>
          </a-form-model-item>
          <a-form-model-item label="服务部查询">
            <a-select placeholder="请选择服务部" v-model="page.regionName" show-search :filter-option="filterOption" allowClear style="width: 190px">
              <a-select-option :value="v.name" v-for="v in selectData " :key="v.name">{{ v.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="onSubmit">查询</a-button>
          </a-form-model-item>
          <a-form-model-item style="float: right;margin-right: 0;">
            <a-button type="primary" @click="apportion">新增任务</a-button>
          </a-form-model-item>
    </a-form-model>
    <div class="tableclass">
      <my-table style="min-height: 94%" :data-source="data" :pagination="false" :columns="columns" :rowKey="(record) => record.id">
        <span slot="action" slot-scope="text, action" style="display: flex;justify-content: space-around;">
          <a-button type="primary" @click="editData(action)" size="small">修改距离</a-button>
          <a-button type="danger" @click="delData(action)" size="small">删除</a-button>
        </span>
      </my-table>
      <div class="bottompage">
        <a-pagination :show-total="(total) => `共 ${total} 条记录`" :item-render="itemRender" v-model="page.current" :total="total" :defaultPageSize="page.size" @change="pagechangeFn" show-less-items/>
      </div>
      <!-- 修改 -->
      <a-modal :title="title" :visible="visibleA" :confirm-loading="confirmLoadingA" @cancel="handleCancel" closable :footer="null" destroyOnClose :maskClosable="false">
        <a-form-model :form="staff" :label-col="{ span: 9 }" :wrapper-col="{ span: 11 }">
          <a-form-model-item label="打卡距离(KM)">
            <a-input allowClear placeholder="打卡距离(KM)" v-model="staff.distance" style="width: 100%"/>
          </a-form-model-item>
        </a-form-model>
        <a-row type="flex" justify="end">
          <a-col :span="6">
            <a-button type="primary" @click="confirmSend">确认</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="cancelBtn">取消</a-button>
          </a-col>
        </a-row>
      </a-modal>
      <!-- 新建距离 -->
      <a-modal :title="title" :visible="visibleB" :confirm-loading="confirmLoadingB" @cancel="handleCancelone" closable :footer="null" destroyOnClose :maskClosable="false">
        <a-form-model :form="staffone" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label="排口选择" labelAlign="right">
            <a-tree-select allowClear placeholder="排口选择" style="width: 100%" @change="choice"
              :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="Outlet"
              :replaceFields="{ title: 'name',key: 'id',value: 'id', children: 'overall',}"></a-tree-select>
          </a-form-item>
          <a-form-model-item label="打卡距离(KM)">
            <a-input allowClear placeholder="打卡距离(KM)" v-model="staffone.distance" style="width: 100%"/>
          </a-form-model-item>
        </a-form-model>
        <a-row type="flex" justify="end">
          <a-col :span="6">
            <a-button type="primary" @click="affirm">确认</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="info" @click="cancelBtnone">取消</a-button>
          </a-col>
        </a-row>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { log } from "video.js";
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
export default {
  data() {
    return {
      listData: [],
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          width: 80,
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },
        {
          title: "排口名称",
          dataIndex: "monitorName",
          align: "center",
          ellipsis: true,
        },
        {
          title: "工厂名称",
          dataIndex: "companyName",
          align: "center",
          ellipsis: true,
        },
        {
          title: "服务部名称",
          dataIndex: "regionName",
          align: "center",
          ellipsis: true,
        },
        {
          title: "距离",
          dataIndex: "distance",
          //  width: "17%",
          align: "center",
        },
        {
          title: "创建人",
          dataIndex: "createMan",
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          align: "center",
          ellipsis: true,
        },
        {
          title: "修改人",
          dataIndex: "updateMan",
          align: "center",
        },
        {
          title: "修改时间",
          dataIndex: "updateTime",
          align: "center",
          ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "200px",
          align: "center",
        },
      ],
      page: {
        current: 1,
        size: 10,
        monitorName: "",
        companyName: "",
        regionName: undefined,
      },
      data: [],
      title: "",
      visibleA: false,
      visibleB: false,
      confirmLoadingA: false,
      confirmLoadingB: false,
      staff: {
        distance: "",
        id: "",
      },
      staffone: {
        distance: "",
        monitorId: "",
      },
      selectData: [], //  下拉筛选数据
      total: 0,
      //排口
      Outlet: [],
    };
  },

  methods: {
    //分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getdata();
    },
    //查询
    onSubmit() {
      this.getdata();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //获取数据
    getdata() {
      var that = this;
      this.$api.task_findDistanceByPage(this.page).then((res) => {
        if (res.data.code == 0) {
          this.data = res.data.data;
          this.data.forEach((item) => {
            if (item.createTime === null) {
              item.createTime = "";
            } else {
              item.createTime = moment
                .unix(item.createTime / 1000)
                .format("YYYY/MM/DD HH:mm:ss");
            }
            if (item.updateTime === null) {
              item.updateTime = "";
            } else {
              item.updateTime = moment
                .unix(item.updateTime / 1000)
                .format("YYYY/MM/DD HH:mm:ss");
            }
            this.total = res.data.total;
          });
        }
      });
    },
    recursion(data) {
      data.forEach((v) => {
        if (v.type != 3) {
          v.selectable = false;
          this.recursion(v.overall);
        }
      });
      return data;
    },
    paikou() {
      this.$api.saveChoiceEquipmentPo().then((res) => {
        if (res.data.code == 0) {
          let data = res.data.data;
          let _list = this.recursion(data);
          this.Outlet = [];
          this.Outlet = _list;
        }
      });
    },
    //弹窗关闭
    handleCancel() {
      console.log("点击关闭按钮");
      this.visibleA = false;
    },
    handleCancelone() {
      console.log("点击关闭按钮1");
      this.visibleB = false;
    },
    //取消按钮
    cancelBtn() {
      this.visibleA = false;
    },
    cancelBtnone() {
      this.visibleB = false;
      this.staffone = {};
    },
    //新增距离
    apportion() {
      this.title = "新增打卡距离";
      this.visibleB = true;
    },
    //修改距离
    editData(data) {
      this.title = "修改距离";
      this.visibleA = true;
      this.staff.id = data.id;
      this.staff.distance = data.distance;
    },
    delData(data){
      const then = this
      this.$confirm({
        title:"是否确认删除？",
        onOk(){
          then.$api.task_removeDistanceById(data.id).then(res=>{
            if(res.data.code === 0){
              then.$message.info("删除成功！");
              then.getdata();
            }else {
              then.$message.error("删除失败！")
            }
          })
        }
      })

    },
    //点击选择排口
    choice(title, key) {
      this.staffone.monitorId = title;
    },
    //新增任务
    affirm() {
      if (
        // this.staffone.monitorId !== "" &&
        this.staffone.distance !== ""
      ) {
        var Rectang = JSON.parse(JSON.stringify(this.staffone)); //深拷贝
        this.$api.task_insertDistance(Rectang).then((res) => {
          if (res.data.code == 0) {
            this.visibleB = false;
            this.$message.info("新建任务成功");
            this.staffone = {};
            this.getdata();
          } else {
            this.$message.info(res.data.errorMessage);
            return;
          }
        });
      } else {
        this.$message.info("输入不能为空");
      }
    },
    //修改距离
    confirmSend() {
      if (this.staff.distance !== "") {
        var Rectang = JSON.parse(JSON.stringify(this.staff)); //深拷贝
        console.log(Rectang);
        this.$api.task_updateDistance(Rectang).then((res) => {
          this.visibleA = false;
          this.$message.info("修改距离成功");
          this.getdata();
        });
      } else {
        this.$message.info("输入不能为空");
      }
    },
  },
  mounted() {
    this.getdata();
    this.paikou();
    this.$api.areaFindPoint(3).then((res) => {
      if (res.data.code == 0) {
        this.selectData = res.data.data;
      }
    });
  },
};
</script>
<style scoped src="../../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.scroll-bar {
  font-size: 24px;
  color: #4ccbad;
}
.monitorCalibrationRecordPo {
  font-size: 18px;
  text-align: center;
  color: #9fb043;
}
.listcentent {
  font-size: 16px;
  text-align: center;
  color: #bebebe;
  line-height: 30px;
  height: 30px;
}
.ant-row-flex-end {
  margin-top: 30px;
}
#salvenote {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}

::v-deep#salvenote .ant-table table {
  height: auto;
  border-radius: 0;
}
.bottompage {
  margin-top: 12px;
  float: right;
}
#salvenote ::v-deep .ant-checkbox-inner {
  border: 2px solid #2e9685;
  background-color: rgba(140, 179, 174, 0.5) !important;
}

.ant-form-item {
  color: #bebebe;
}
// 详情
::v-deep #salvenote .ant-form-item-children {
  color: rgba(255, 255, 255, 0.7);
}
.table-all {
  width: 100%;
}
</style>

